<template>
  <header class="header">
    <div class="layout-container clearfix">
      <h1><a href="javascript:">LOGO</a></h1>
      <div class="login-action">
        <router-link to="/login" class="el-button el-button--medium"
          >登录</router-link
        >
        <router-link
          to="/register"
          class="el-button el-button--success el-button--medium"
          >注册</router-link
        >
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "LandingHeader"
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.header {
  position: relative;
  z-index: 999;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);

  h1 {
    float: left;
    padding-top: 10px;
  }

  .login-action {
    float: right;
    padding-top: 10px;

    a:hover {
      text-decoration: none;
    }
  }
}

.layout-container {
  max-width: 1056px;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;

  > .el-row {
    padding: 64px 0;
  }
}
</style>
